3
私は下の画像のようにドロップダウンメニューを作りたいと思います。問題は、メインメニューの2番目の項目にカーソルを置くと、サブメニューが画像の左側に表示されているように上から余白を残してしまうことです。私はその空きスペースを望んでいません。サブメニューを持つすべてのメインメニューオプションのサブメニューが常に同じサイズと位置に表示されるようにします。サブメニューが希望通りに配置されていません
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:0px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu > a:after {
content: " ";
display: block;
float: right;
height: 0;
margin-right: -1px;
margin-top: 5px;
width: 190px;
padding-left:10px;
}
#abg > li > a:hover, #abg > .active > a:hover {
text-decoration: none;
background-color:#49b3e7;
padding-top:15px;
padding-bottom:20px;
}
@media (max-width: 767px) {
.navbar-nav {
display: inline;
}
.navbar-default .navbar-brand {
display: inline;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-nav .dropdown-menu > li > a {
color: red;
background-color: #ccc;
border-radius: 4px;
margin-top: 2px;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #333;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
background-color: #ccc;
}
.navbar-nav .open .dropdown-menu {
border-bottom: 1px solid white;
border-radius: 0;
}
.dropdown-menu {
padding-left: 10px;
}
.dropdown-menu .dropdown-menu {
padding-left: 20px;
}
.dropdown-menu .dropdown-menu .dropdown-menu {
padding-left: 30px;
}
li.dropdown.open {
border: 0px solid red;
}
}
@media (min-width: 768px) {
ul.nav li:hover > ul.dropdown-menu {
display: block;
}
#navbar {
text-align: center;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar">
<nav class="navbar navbar-default navbar-fixed-top hidden-xs " role="navigation" style="background-color:#49b3e7;color:white;margin-top:50px;cursor:pointer">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown" style="cursor:pointer">
<a href="ab10.html"><span class="dropdown-toggle" data-toggle="dropdown" style="color:white;cursor:pointer;">All Products </span><span class="caret" style="color:white;cursor:pointer;"></span></a>
<ul class="dropdown-menu" id="abg">
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Grocery</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;text-align: -webkit-match-parent;">
<li><a href="ab2.html" style="padding-top:15px;padding-bottom:15px;">Meals & Prep</a></li>
<li><a href="ab3.html" style="padding-top:15px;padding-bottom:15px;">Spreads & Sweeteners</a></li>
<li><a href="ab4.html" style="padding-top:15px;padding-bottom:15px;">Breafast</a></li>
<li><a href="ab5.html" style="padding-top:15px;padding-bottom:15px;">Salty Snacks</a></li>
<li><a href="ab6.html" style="padding-top:15px;padding-bottom:15px;">Chocolate & Candy</a></li>
<li><a href="ab7.html" style="padding-top:15px;padding-bottom:15px;">Condiments & Spices</a></li>
<li><a href="ab8.html" style="padding-top:15px;padding-bottom:15px;">Fruits & Nuts</a></li>
<li><a href="ab9.html" style="padding-top:15px;padding-bottom:15px;">Cookies & Bars</a></li>
<hr>
<li><a href="ab11.html" style="padding-top:15px;padding-bottom:15px;">Shop All Grocery</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Dole-licious </br>Snacks </h3>
<img src="grocery1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Beverages</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;text-align: -webkit-match-parent;">
<li><a href="ab12.html" style="padding-top:15px;padding-bottom:15px;">Coffee & Tea</a></li>
<li><a href="ab13.html" style="padding-top:15px;padding-bottom:15px;">Dairy</a></li>
<li><a href="ab14.html" style="padding-top:15px;padding-bottom:15px;">Jucies</a></li>
<li><a href="ab15.html" style="padding-top:15px;padding-bottom:15px;">Mixes</a></li>
<li><a href="ab16.html" style="padding-top:15px;padding-bottom:15px;">Sports & Energy</a></li>
<li><a href="ab17.html" style="padding-top:15px;padding-bottom:15px;">Water & Sparkling</a></li>
<hr>
<li><a href="ab18.html" style="padding-top:15px;padding-bottom:15px;">Shop All Beverages</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-61px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:77px;margin-top:163px;"> Flavorful</br> fun made </br>easy</h3>
<img src="beverages1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Bath & Body</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li><a href="ab19.html" style="padding-top:15px;padding-bottom:15px;">Deodorants</a></li>
<li><a href="ab20.html" style="padding-top:15px;padding-bottom:15px;">Hand Soaps</a></li>
<li><a href="ab21.html" style="padding-top:15px;padding-bottom:15px;">Shaving</a></li>
<li><a href="ab22.html" style="padding-top:15px;padding-bottom:15px;">Shower</a></li>
<li><a href="ab23.html" style="padding-top:15px;padding-bottom:15px;">Skin Care</a></li>
<hr>
<li><a href="ab24.html" style="padding-top:15px;padding-bottom:15px;">Shop All Bath & Body</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-116px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Would you </br>Lather </h3>
<img src="bath&body1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Health</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li><a href="ab25.html" style="padding-top:15px;padding-bottom:15px;">Ladies</a></li>
<li><a href="ab26.html" style="padding-top:15px;padding-bottom:15px;">Dental & Eye</a></li>
<li><a href="ab27.html" style="padding-top:15px;padding-bottom:15px;">Relief</a></li>
<li><a href="ab28.html" style="padding-top:15px;padding-bottom:15px;">Supplements</a></li>
<li><a href="ab29.html" style="padding-top:15px;padding-bottom:15px;">Adult Care</a></li>
<hr>
<li><a href="ab30.html">Shop All Health</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-171px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;">Picture of </br>Health </h3>
<img src="health.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Cleaning Supplies</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li><a href="ab31.html" style="padding-top:15px;padding-bottom:15px;">Surface Cleaners</a></li>
<li><a href="ab32.html" style="padding-top:15px;padding-bottom:15px;">Paper & Plastic</a></li>
<li><a href="ab33.html" style="padding-top:15px;padding-bottom:15px;">Laundry</a></li>
<li><a href="ab34.html" style="padding-top:15px;padding-bottom:15px;"> Dish Soaps</a></li>
<li><a href="ab35.html" style="padding-top:15px;padding-bottom:15px;">Air & Fresheners</a></li>
<hr>
<li><a href="ab36.html" style="padding-top:15px;padding-bottom:15px;">Shop All Cleaning Supplies</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-226px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> So Fresh </br>and Clean </h3>
<img src="cleaning.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Home & Office</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li><a href="ab37.html" style="padding-top:15px;padding-bottom:15px;">Stationery</a></li>
<li><a href="ab38.html" style="padding-top:15px;padding-bottom:15px;">Appliances & Tools</a></li>
<li><a href="ab39.html" style="padding-top:15px;padding-bottom:15px;">Tabletop & Storage</a></li>
<hr>
<li><a href="ab40.html" style="padding-top:15px;padding-bottom:15px;">Shop All Home & Office</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-281px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Lock in the </br>freshness </h3>
<img src="home.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Babies & Kids </span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li><a href="ab41.html" style="padding-top:15px;padding-bottom:15px;">Care & Cleaning</a></li>
<li><a href="ab42.html" style="padding-top:15px;padding-bottom:15px;">Diapers & Wipes</a></li>
<li><a href="ab43.html" style="padding-top:15px;padding-bottom:15px;">Nutrition</a></li>
<hr>
<li><a href="ab44.html" style="padding-top:15px;padding-bottom:15px;">Shop All Babies & Kids</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-336px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Baby got </br> Bath </h3>
<img src="baby.png" class="img-responsive"></a>
</ul>
</li>
<li><a href="ab45.html" style="padding-top:15px;padding-bottom:20px;">Lifestyle<span class="glyphicon glyphicon-chevron-right" style="margin-left:150px;color: rgba(255, 255, 255, .1);"></span></a></li>
<li><a href="ab46.html" style="padding-top:15px;padding-bottom:20px;border-bottom:1px solid #6d6d6d;">Pets <span class="glyphicon glyphicon-chevron-right" style="margin-left:150px;color:rgba(255, 255, 255, .1);"></span></a></li>
<li><a href="ab47.html" style="padding-top:15px;padding-bottom:20px;">Shop All Products <span class="glyphicon glyphicon-chevron-right" style="margin-left:100px;color:rgba(255, 255, 255, .1);"></span></a></li>
</ul>
</li>
<li><a href="ab49.html" style="color:white;">Best Sellers</a></li>
<li><a href="ab50.html" style="color:white;">What's New</a></li>
<li><a href="ab51.html" style="color:white;">On Sale</a></li>
<li><a href="ab52.html" style="color:white;">Samples</a></li>
</ul>
</div>
</nav>
</div>
サブメニューを実際にクリックするのではなく、親メニューの上からポップアウトしたいのですか？それはひどい考えのようです。なぜ、あなたのユーザーのための基本的なGUIコンベンションを打破したいのですか？ – tripleee
申し訳ありませんクライアントの必要条件 –
ナビゲーションコンテナから絶対位置に配置することができます（上：0、左：100％？ – Cheshire