html - 如何在固定位置显示一个 ul 作为子菜单？

Question

我有一个水平菜单，当悬停被激活时显示一个子菜单，最终结果与 eBay 菜单非常相似，问题是所有子菜单都相对于它们的父菜单定位，我需要以完全相同的方式显示所有子菜单当前位置:

CSS:

#menu-superior{width:100%; min-width:1000px; background: none repeat scroll 0 0 #F7F7F7;box-shadow: 0 -10px 16px #E7E7E7 inset;}
.ulclass{list-style: none outside none; margin: 0 auto; overflow: hidden; width: 1200px;}
.ulclass li{ float: left; height: 35px; border-right: 1px solid #CCCCCC;}
.ulclass li:hover .ulsubmenu{display:block; position:absolute;}
.ulsubmenu{background: none repeat scroll 0 0 #F8F8F8; border: 1px solid #CCCCCC; box-shadow: 2px 2px #EAEAEA; display: none; list-style: none outside none; position: absolute; width: 1200px; z-index:999; transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -webkit-transition: all 0.9s ease-in-out;}
.ulsubmenu li{border: medium none; width: 200px;}
.subcategorias{width:200px; float:left;}
.imagen-categoria{width:800px; max-width:800px; min-width:800px; float:left; display: inline-block; height: 100%; vertical-align: middle;}
img.categoria-menu{vertical-align: middle; max-width:800px;}
.ulsubmenu li:last-of-type{border: medium none !important;}
.ulsubmenu li a{font-family: arial !important;font-size: 12px; font-weight: normal !important; display:block;}
.ulclass li:nth-of-type(5){float: left; height: 35px; border-right:none;}
.ulclass li:last-of-type{Float: left; height: 35px; border-right:none; border-left: 1px solid #CCCCCC;}
.ulclass li a.top{color: #6A6A6A; line-height: 35px; text-decoration:none; padding: 0 17px 35px;; font-size:16px;}
.ulclass li a{color: #6A6A6A; text-decoration:none; padding: 10px 17px; font-size:12px;}
.ulclass li a:hover{text-decoration:underline;}

HTML:

<nav id="menu-superior">
  <ul class="ulclass">
    <li><a href="items/collectible-and-arts" class="top">Collectible &amp; Arts</a><ul class="ulsubmenu">
                    <div class="subcategorias"><li><a href="categorias/antiques">Antiques</a></li><li><a href="categorias/art">Art</a></li><li><a href="categorias/coins-and-paper-money">Coins &amp; Paper Money</a></li><li><a href="categorias/collectibles">Collectibles</a></li></div><div class="imagen-categoria"> <img src="http://rtm.ebaystatic.com/0/RTMS/Image/3282_LATAM_WebsiteLaunch_Flyouts_770x270_Phones_4_3_2014_1_07_16_327.jpg" class="categoria-menu"> </div></ul></li><li><a href="items/electronics" class="top">Electronics</a><ul class="ulsubmenu">
                    <div class="subcategorias"><li><a href="categorias/cameras-and-photo">Cameras &amp; Photo</a></li><li><a href="categorias/computers-tablets-and-networking">Computers/Tablets &amp; Networking</a></li><li><a href="categorias/consumer-electronics">Consumer Electronics</a></li><li><a href="categorias/tv--audio-and-video">Tv, Audio &amp; Video</a></li></div><div class="imagen-categoria"> <img src="http://rtm.ebaystatic.com/0/RTMS/Image/3282_LATAM_WebsiteLaunch_Flyouts_770x270_Phones_4_3_2014_1_07_16_327.jpg" class="categoria-menu"> </div></ul></li><li><a href="items/entertaiment" class="top">Entertaiment</a><ul class="ulsubmenu">
                    <div class="subcategorias"><li><a href="categorias/dvds-and-movies">DVDs &amp; Movies</a></li><li><a href="categorias/music">Music</a></li><li><a href="categorias/musical-instruments-and-gear">Musical Instruments &amp; Gear</a></li><li><a href="categorias/video-games-and-consoles">Video Games &amp; Consoles</a></li></div><div class="imagen-categoria"> <img src="http://rtm.ebaystatic.com/0/RTMS/Image/3282_LATAM_WebsiteLaunch_Flyouts_770x270_Phones_4_3_2014_1_07_16_327.jpg" class="categoria-menu"> </div></ul></li><li><a href="items/fashion" class="top">Fashion</a><ul class="ulsubmenu">
                    <div class="subcategorias"><li><a href="categorias/clothing--shoes-and-accessories">Clothing, Shoes &amp; Accessories</a></li><li><a href="categorias/health-and-beauty">Health &amp; Beauty</a></li><li><a href="categorias/jewelry-and-watches">Jewelry &amp; Watches</a></li></div><div class="imagen-categoria"> <img src="http://rtm.ebaystatic.com/0/RTMS/Image/3282_LATAM_WebsiteLaunch_Flyouts_770x270_Phones_4_3_2014_1_07_16_327.jpg" class="categoria-menu"> </div></ul></li><li><a href="items/home-and-garden" class="top">Home &amp; Garden</a><ul class="ulsubmenu">
                    <div class="subcategorias"><li><a href="categorias/crafts">Crafts</a></li><li><a href="categorias/home-decoration">Home Decoration</a></li><li><a href="categorias/home-improvement">Home Improvement</a></li><li><a href="categorias/tools">Tools</a></li></div><div class="imagen-categoria"> <img src="http://rtm.ebaystatic.com/0/RTMS/Image/3282_LATAM_WebsiteLaunch_Flyouts_770x270_Phones_4_3_2014_1_07_16_327.jpg" class="categoria-menu"> </div></ul></li>  </ul>
</nav>

这是 jsfiddle 中的代码:http://jsfiddle.net/tx036r5j/

Answer 1

看@这个 fiddle

position: absolute;
left: 0px;

http://jsfiddle.net/9pzw4ncj/

你是这个意思吗？