горизонтальное меню и подменю с общей границей, которые должны работать в 7

Question

У меня есть вопрос по поводу одного горизонтального меню. Прежде всего позвольте мне показать пример того, чего я хочу достичь пример , и здесь показано, где я сейчас нахожусь http://jsfiddle.net/6KKTe/, цвет и содержание I ну добавлю позже.

1. Подменю должно быть выровнено по левому краю с его родителем, но когда я изменяю в #nav li {position :lative;}, оно игнорирует плавающий слева элемент, а также родительскую границу подменю из главного меню, что я не могу удалить.

2. Меню должно иметь горизонтальное подменю без фона, но иметь общую границу с родителем, ширину меню и подменю.

3. И что делает это более трудным, это то, что этот должен работать в IE7.

Answer 1

Вот что я изменил в CSS и HTML:

.submenu {
visibility: hidden;
position: absolute;
list-style:none;
padding: 0;
display: block;
}

.submenu li{float: left; list-style: none;}

.submenu li ul{
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
background: #ddddef;
}
.submenu li{float: none; display: inline;}

#nav li:hover div{
position: relative;
width: 1000%;
overflow: visible;
}

#nav li:hover div .submenu{
margin-top: 5px;
left: -10px;
border: 1px solid #000000;
visibility: visible;
overflow: visible;
}

В html я назначил класс ul и удалил его из div.

      <ul id="nav">
        <li><a href="#">Primu</a></li>
        <li>
        <a href="#">Adoilea</a>
        <div>
             <ul class="submenu">
                    <li><a href="#">submenu1</a></li>
                    <li><a href="#">sub2</a></li>
                    <li><a href="#">subtrei</a></li>
                    <li><a href="#">subpatru</a></li>
              </ul>
        </div>

        </li>
        <li><a href="#">trei</a></li>
        <li><a href="#">patru</a></li>
        <li><a href="#">cinci</a></li>
</ul>

протестировано в IE8 и FF, не имеет IE7. Подменю выравнивается по левому краю родительского элемента. До сих пор не выяснили способ удаления границы нижней части от родителя. Думаю, для этого тебе понадобится JS.

EDIT: это комбинация CSS и jQuery. Единственная проблема заключается в том, что элемент с подменю получает большее поле справа, так как он должен быть такой же ширины, как первый элемент подменю). Так что вы можете подумать, что с этим делать, но, по крайней мере, это какая-то идея.

HTML такой же, как указано выше. JQuery:

$(document).ready(function(){
$('.firstitem').parent().parent().parent().width($('.firstitem').width()).find('a').css("margin", "0px auto").css("text-align", "center");



$('#nav li').hover(
function(){

if ($(this).find('ul').hasClass('submenu')){
$(this).css("border"," 1px solid #000000");
$(this).css("border-bottom"," 1px solid #6d695c");
//$(this).width($(this).find('.firstitem').width() + 1);
 }
     }, 
function (){
if ($(this).find('ul').hasClass('submenu')){
$(this).css("border","1px solid #6d695c");
 }
 });


  });

повторно посетил CSS:

#nav {
    list-style:none;
    padding: 0;
    position: relative;
    display: block;
}
#nav li {
    float: left;
    padding: 6px 10px;
    background-color: #6d695c;
}
#nav li:hover {
    border: 1px solid #000000;
}
#nav li a {
    text-decoration: none;
    color: #09F;
}
#nav li:hover a {
    color: #000000;
}
#nav .submenu li a {
    color: #3F0;
}
.submenu {
visibility: hidden;
position: absolute;
list-style:none;
padding: 0;
display: block;
}

.submenu li{float: left; list-style: none; padding: 0; margin: 0;}

.submenu ul{
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
background: #ddddef;
}
.submenu li{float: none; display: inline;}

#nav li:hover div{
position: relative;
width: 1000%;
overflow: visible;
}

#nav li:hover div .submenu{
    margin-top: 5px;
    padding: 0;
    left: -11px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-top: 0px;
    visibility: visible;
    overflow: visible;
}

#nav li:hover div .submenu > li{
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

#nav li:hover div .submenu > li.firstitem{
    border-top: 1px solid #6d695c;
    border-bottom: 1px solid #000000;
}
#nav li:hover div .submenu li:hover{
border: 2px solid #000000;
}