Question

我有一个从Dreamweaver模板创建的垂直菜单栏。为此生成了CSS。我已经添加了一个子菜单，我想在它们对应的主菜单链接的左边弹出。我尝试的一切和我的所有研究都没有结果。我相信我的CSS文件在某种程度上不允许我的子菜单向左弹出。

现在做的是一切都是垂直的。子菜单根据需要隐藏，但是当悬停时，它会弹出而不是向左弹出。请帮助我，因为我已经工作了近一个星期，没有回答。提前致谢。

HTML

    <div class="sidebar1">
      <nav>
        <ul id="navbar">
          <li><a href="index.html">Home</a></li>
          <li><a href="solarshades.html">Solar Shades</a>
              <ul class="submenu">
              <li><a href="SolarShadeFabrics.html">Solar Shades Fabrics</a> </li>
              </ul></li>
          <li><a href="privacyshades.html">Privacy Shades</a>
              <ul class="submenu">
              <li><a href="PrivacyShadeFabrics.html">Privacy Shades Fabrics</a> </li>
              </ul></li>
          <li><a href="blackoutshades.html">Blackout Shades</a>
              <ul class="submenu">
              <li><a href="BlackoutShadeFabrics.html">Blackout Shades Fabrics</a> </li>
              </ul></li>
          <li><a href="patioshades.html">Patio Shades</a>
              <ul class="submenu">
              <li><a href="PatioShadeFabrics.html">Exterior Shades Fabrics</a> </li>
              </ul></li>
          <li><a href="customdrapesandcurtain.html">Custom Drapes and Curtains</a>
              <ul class="submenu">
              <li><a href="DraperyFabrics.html">Drapery Fabrics</a> </li>
              <li><a href="MeasureingDrapery.html">Measuring Drapery</a> </li>
              <li><a href="Curved Drapery Template.html">Curved Drapery Template</a> </li>
              </ul></li>
          <li><a href="draperysystems.html">Drapery Systems</a></li>
          <li><a href="hometheatercurtains.html">Home Theater Curtains</a>
              <ul class="submenu">
              <li><a href="HomeTheaterFabrics.html">Home Theater Fabrics</a> </li>
              </ul></li>
          <li><a href="somfyproducts.html">Somfy products</a>
          <ul class="submenu">
              <li><a href="SomfyMotor.html">Somfy Motor</a> </li>
              <li><a href="SomfyControl.html">Somfy Control</a> </li>
              <li><a href="SomfySwitch.html">Somfy Switch</a> </li>
              <li><a href="SomfyAccessories.html">Somfy Accessories</a> </li>
              </ul></li>
          <li><a href="photogalleries.html">Photo Gallary</a>
          <ul class="submenu">
              <li><a href="DraperyShowroom.html">Drapery Showroom</a> </li>
              <li><a href="PortfolioGallery.html">Portfolio Gallerys</a> </li>
              </ul></li>
          <li><a href="howtomeasureforshades.html">How to Measure for Shades</a></li>
          <li><a href="requestforshadequote.html">Request for Shade Quote</a></li>
          <li><a href="technicallinks.html">Technical Links</a></li>
          <li><a href="aboutus.html">About Us</a></li>
          <li><a href="contactus.html">Contact Us</a></li>
        </ul>
        </nav>
        <aside>
          <p> Some informational text can go HERE</p>

        </aside>

      </div>

CSS

@charset "utf-8";
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}
ul, ol, dl { 
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {

    margin-top: 0;   
    padding-right: 15px;
    padding-left: 15px; 
}
a img { 
    border: none;
}

a:link {
    color: #42413C;
    text-decoration: underline; 
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus { 
    text-decoration: none;
}

.container {
    width: 960px;
    background-color: #FFFFFF;
    margin: 0 auto; 
}
header {
    background-color: #ADB96E;
}
.sidebar1 {
    float: right;
    width: 180px;
    background-color: #EADCAE;
    padding-bottom: 10px;
    }
.content {
    padding: 10px 0;
    width: 780px;
    float: right;
}
.content ul, .content ol {
    padding: 0 15px 15px 40px; 
}
nav ul{
    list-style: none; 
    border-top: 1px solid #666; 
    margin-bottom: 15px; 
}
nav li {
    border-bottom: 1px solid #666; 
    }
nav a, nav a:visited { 
    padding: 5px 5px 5px 15px;
    display: block; 
    width: 160px;  
    text-decoration: none;
    background-color: #C6D580;
}
nav a:hover, nav a:active, nav a:focus { 
    background-color: #ADB96E;
    color: #FFF;
}
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
        display: block;
}
/* ~~ The footer ~~ */
footer {
    padding: 10px 0;
    background-color: #CCC49F;
    position: relative;
    clear: both;
}
header, section, footer, aside, article, figure {
    display: block;
}

Answer 1

尝试绝对定位ul.submenu元素。然后，您可以明确地设置宽度，并将其与像素ul#navbar li父元素的左边缘的像素一起放置left: -180px（或者为宽度设置的任何值）。

<强> DEMO

ul#navbar li {
    position: relative;
}
ul.submenu {
    position: absolute;
    width: 180px;
    left: -180px;
    top: 0;
}

此外，您在{行的原始CSS中缺少大括号nav ul {...}

Answer 2

我继续使用您的样式作为基础重建导航栏的CSS来清理它。

@charset "utf-8";
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}

ul, ol, dl { 
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, p {

    margin-top: 0;   
    padding-right: 15px;
    padding-left: 15px; 
}

a img { 
    border: none;
}

a:link {
    color: #42413C;
    text-decoration: underline; 
}

a:visited {
    color: #6E6C64;
    text-decoration: underline;
}

a:hover, a:active, a:focus { 
    text-decoration: none;
}

.container {
    width: 960px;
    background-color: #FFFFFF;
    margin: 0 auto; 
}

header {
    background-color: #ADB96E;
}

.sidebar1 {
    float: right;
    width: 180px;
    background-color: #EADCAE;
    padding-bottom: 10px;
}

.content {
    padding: 10px 0;
    width: 780px;
    float: right;
}

/* ~~ The navbar ~~ */
nav #navbar {
    list-style: none;
    border-top: 1px solid #666;
    margin-bottom: 15px;
}

nav #navbar:after {
    content: '';
    clear: both;
    display: block;
}

nav #navbar li {
    float: left;
    border-bottom: 1px solid #666;
    background-color: #C6D580;
    position: relative;
}

nav #navbar li a {
    padding: 5px 5px 5px 15px;
    width: 160px;
    display: block;
    text-decoration: none;
}

nav #navbar li:hover {
    background-color: #ADB96E;
}

nav #navbar li:hover > a, nav #navbar li .submenu li:hover > a {
    color: #FFF;
}

nav #navbar li .submenu {
    list-style: none;
    display: none;
    position: absolute;
    right: 100%;
    top: 0;
}

nav #navbar li .submenu li {
    float: none;
}

nav #navbar li:hover > .submenu {
    display: block;
}

/* ~~ The footer ~~ */
footer {
    padding: 10px 0;
    background-color: #CCC49F;
    position: relative;
    clear: both;
}
header, section, footer, aside, article, figure {
    display: block;
}

<div class="sidebar1">
    <nav>
        <ul id="navbar">
            <li><a href="index.html">Home</a></li>
            <li><a href="solarshades.html">Solar Shades</a><ul class="submenu">
                <li><a href="SolarShadeFabrics.html">Solar Shades Fabrics</a></li>
                </ul></li>
            <li><a href="privacyshades.html">Privacy Shades</a><ul class="submenu">
                <li><a href="PrivacyShadeFabrics.html">Privacy Shades Fabrics</a></li>
                </ul></li>
            <li><a href="blackoutshades.html">Blackout Shades</a><ul class="submenu">
                <li><a href="BlackoutShadeFabrics.html">Blackout Shades Fabrics</a></li>
                </ul></li>
            <li><a href="patioshades.html">Patio Shades</a><ul class="submenu">
                <li><a href="PatioShadeFabrics.html">Exterior Shades Fabrics</a></li>
                </ul></li>
            <li><a href="customdrapesandcurtain.html">Custom Drapes and Curtains</a><ul class="submenu">
                <li><a href="DraperyFabrics.html">Drapery Fabrics</a></li>
                <li><a href="MeasureingDrapery.html">Measuring Drapery</a></li>
                <li><a href="Curved Drapery Template.html">Curved Drapery Template</a></li>
                </ul></li>
            <li><a href="draperysystems.html">Drapery Systems</a></li>
            <li><a href="hometheatercurtains.html">Home Theater Curtains</a><ul class="submenu">
                <li><a href="HomeTheaterFabrics.html">Home Theater Fabrics</a></li>
                </ul></li>
            <li><a href="somfyproducts.html">Somfy products</a><ul class="submenu">
                <li><a href="SomfyMotor.html">Somfy Motor</a></li>
                <li><a href="SomfyControl.html">Somfy Control</a></li>
                <li><a href="SomfySwitch.html">Somfy Switch</a></li>
                <li><a href="SomfyAccessories.html">Somfy Accessories</a></li>
                </ul></li>
            <li><a href="photogalleries.html">Photo Gallary</a><ul class="submenu">
                <li><a href="DraperyShowroom.html">Drapery Showroom</a></li>
                <li><a href="PortfolioGallery.html">Portfolio Gallerys</a></li>
                </ul></li>
            <li><a href="howtomeasureforshades.html">How to Measure for Shades</a></li>
            <li><a href="requestforshadequote.html">Request for Shade Quote</a></li>
            <li><a href="technicallinks.html">Technical Links</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
        </ul>
    </nav>
    <aside>
        <p>Some informational text can go HERE</p>
    </aside>
</div>

它功能齐全，position的{{1}}基于.submenu悬停的relative位置。

我希望这会有所帮助。 ^^

HTML Pure CSS - 带有子菜单的垂直菜单，左侧弹出

2 个答案: