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

Question

我有一个从Dreamweaver模板创建的垂直菜单栏。 为此生成了CSS。 从那以后，我添加了一个子菜单，我想从它们对应的主菜单链接的左侧弹出。 我尝试过的一切以及所有的研究都无济于事。 我认为我的CSS文件某种程度上不允许子菜单向左弹出。

现在正在做的事情是垂直的。 子菜单可根据需要隐藏，但悬停时会弹出而不是向左弹出。 请帮我解决这个问题，因为我已经进行了将近一个星期的工作，而且看不到答案。 提前致谢。

JSfiddle演示

的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 （或您为宽度设置的任何值）。

演示

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

另外，您的nav ul {...}行的原始CSS中缺少花括号{

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> 

它的功能齐全， .submenu position基于将鼠标悬停在nav #navbar li的relative位置上。

我希望这有帮助。 ^^