-1

サブメニューの幅をwidth:autoに設定すると、非常に長い名前の項目が押しつぶされてしまいます。現在、一部のメニューが長く静かになる可能性があるため、幅を 175% に設定していますが、これは望ましくありません。width:auto を長いメニュー項目で機能させるにはどうすればよいですか。

デモ サイトへのリンク: http://previewyournewwebsite.info/otsl/

ここに画像の説明を入力

.nav.main_nav .sub-menu {
    background-color: #2D556F;
    display: none;
    height: auto;
    /* left: -5px; */
    left: 0px;
    margin: 0 9px 0 0;
    position: absolute;
    top: 54px;
    width: 175%;
}

.nav.main_nav .sub-menu li {
    margin: 30px 0px;
    display: block;
}


.nav.main_nav .sub-menu li a {
    background-image: url("./images/sub-nav-divider.png");
    background-position: 0 bottom;
    height: 50px;
    line-height: 50px;
    background-repeat: repeat-x;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 15px;
    margin-left: -31px;
    padding: 0 0 0 44px;
    width: 100%;
}

.nav.main_nav .sub-menu > li{
    height: 50px;
    line-height: 50px;
    padding-left: 44px;
}

.nav.main_nav .sub-menu > li:last-child a{
    background-image: none;
}

.nav.main_nav .sub-menu li {
    display: block;
    margin: 0;
}

サイトへのリンク: http://previewyournewwebsite.info/otsl/

4

1 に答える 1

0

これを探していますか？

http://jsfiddle.net/coma/MNFXB/11/

nav ul, nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

nav a {
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding: 1em;
    color: #fff;
    background-color: #2D556F;
    white-space: nowrap;
}

nav > ul {
    background-color: #2D556F;
}

nav > ul:after {
    display: block;
    content: "";
    clear: both;
}

nav > ul > li {
    float: left;
    position: relative;
}

nav > ul > li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    display: none;
}

nav > ul > li:hover > ul {
    display: block;
}

nav li:hover > a {
    background-color: #92A132;
}

または、このようなものが欲しいですか？

http://jsfiddle.net/coma/MNFXB/12/

于 2013-09-23T23:11:59.167 に答える