В горизонтальном меню одна из ссылок раскрывается. Код очень простой:

 <div class="menju"><a href="#">Один</a></div> 
<div class="menju"><a href="#">Два</a></div> 
<div class="menju"><a href="#">Три</a></div> 
<div class="menju"> 
<ul id="nav"> 
    <li style="border:1px solid #afafb2;font-size:20px; padding:7px;">Четыре 
        <ul> 
            <li><a href="abc.html">Главная страница</a></li> 
            <li><a href="#">Другие страницы</a></li> 
        </ul> 
    </li> 
</ul> 
</div> 
<div class="menju"><a href="#">Пять</a></div> 
  
<div class="clear"></div>  

Но почему-то получается, что у слова "Четыре" нет правой части рамки в Хроме, Яндексе и в Опера (скриншот). Смотрел инспектором кода, но так и не сумел понять, почему это происходит. Вроде бы, все на месте, в рамки нет!

Можете посмотреть, что там такое? Вот ссылка

у тебя хрень какая-то в контенте "четыре"... типа переносы строки.... короче мусор, надо вычистить. вычищая граница появляется.

С этой ситуацией "типа переноса строки" я уже встречался много раз и каждый раз пытался понять, что же это такое. Но ни разу не удалось и я списал этот эффект на сам анализатор кода.
Кстати, чаще всего наличие этого "переноса" нисколько не мешает нормальной работе.

<div class="menju"><a href="#">Один</a></div>
<div class="menju"><a href="#">Два</a></div>
<div class="menju"><a href="#">Три</a></div>
<div class="menju">
<ul id="nav">
	<li>
  <span style="border:1px solid #afafb2;font-size:20px; padding:7px;">Четыре</span>
		<ul>
			<li><a href="abc.html">Главная страница</a></li>
			<li><a href="#">Другие страницы</a></li>
		</ul></li>
</ul>
</div>
<div class="menju"><a href="#">Пять</a></div>

<div class="clear"></div>

<br>
	<p>Здесь расположен простой контент для демонстрации перекрытия меню.</p>

Зачем делать такую сложную структуру для выпадающего меню div > ul>li > ul > li , непонятно. Тот, кому придется натягивать это, будет вспоминать верстака не самыми лестными словами.

Вполне можно обойтись только списками:

<ul class="navigation">
   <li><a>Link 1</a></li>
   <li class="active">
      <span>Link 3</span>
      <ul>
         <li><a>Sublink 1</a></li>
      </ul>
   </li>
</ul>

ну попробуй например так:

<li ...>четыре</li>

т.е. напиши этот элемент в строчку, а не так (подозреваю что у тебя так):

<li ...>
  четыре
</li>

если проблема исчезнет, значит у тебя редактор кода генерит мусор по каким-то своим соображениям. какой у тебя редактор?

или скинь исходник c этим куском мне на почту (мой ник@мейлру). посмотру что за мусор в исходнике лежит.

Спасибо, Вы оказались совершенно правы и проблема разрешилась именно так!

Исправлено

Этот же код переписан вот так:

<ul id="nav">
	<li style="border:1px solid #afafb2;font-size:20px; padding:7px;">Четыре<ul>
			<li><a href="abc.html">Главная страница</a></li>
			<li><a href="#">Другие страницы</a></li>
		</ul>
	</li>
</ul>

Редактор Dreamweaver. В будущем надо учесть это странное свойство!

Спасибо!

нахрена тебе это дримвивер? возьми чтонибудь типа phpstorm.

Какой мусор? какое странное свойство? О чем вы вообще здесь.Это же просто говнокод. Владимир55, оберни текст Четыре в инлайн элемент и примени ему свойства, которые сейчас для li-элемента (смотри мой первый пост), это тебя избавит от этого "странного свойства".

redreem, причем тут редактор? И да, phpstorm тоже отформатирует код и добавит "мусора", что опять сломает верстку ТСа

kaww

если ты не читаешь, то процитирую

redreem, т.е. вы действительно считаете это нормальным решением? Я ничего не хочу доказать, а лишь указал на то, что это костыль, практический смысл которого под большим вопросом.

Владимир55, вот, пример http://line25.com/tutorials/how-to-create-...s-dropdown-menu

kaww

я ничего не считаю. я лишь указал, почему возникает указанная в топике проблема. если есть желание повышать культуру кодинга - вперед, курсы-шмурсы с нуля. а так - смысле нет делать этот вброс.

kaww

дримвивер известен своим говноредакторством. я об этом знал. и с подобным сталкивался. поэтому решение вовсе не сомнительное.