create Horizontal sub menu with css

Question

I want to create a horizontal sub menu when hover on main menu like this

But this is what I have made

How do I resolve this problem?

but i want this enter image description here

/**********************************************************************/

 body { margin: 0; padding: 0; } #iri-header { font-family: 'Iranian Sans'; font-size: 15px; line-height: 1.142; display: block; border: 0; width: 1349px; height: 40.5px; border-bottom: 1px solid gray; } #orb-header { position: relative; } .iri-header-container { width: 1008px; height: 39.5px; margin: 0 auto; border: 0; padding: 0 16px; } .logo { width: 96px; height: 39.5px; border-left: 1px solid black; float: right; } .logo img { float: right; padding-top: 8px; } .loging { width: 197.5px; height: 39.5px; float: right; cursor: pointer; border-left: 1px solid black; } .loging:hover { border-bottom: 2px solid black; } #vorod { float: right; padding: 12px; } .loging img { width: 30px; height: 30px; margin-top: 6px; margin-left: 8px; } .search { width: 300px; height: 39.5px; border-right: 1px solid black; } .Search { width: 45px; height: 39.5px; float: right; margin-right: 10px; } .Search img { width: 100%; height: 100%; } .brand { width: 1349px; height: 95px; background-color: #BB1919; display: block; border: 0; position: relative; } .site-brand { width: 976px; height: 59px; margin: 0 auto; } .brand .site-brand a > span { float: right; font-family: A Ketab; font-size: 35px; margin-top: 6px; color: #ffffff; text-decoration: none; } .menu { width: 1349px; height: 36px; } .menu-container { width: 1349px; height: 35px; background-color: #A91717; } .menu-ul { margin: 0 auto; height: 35px; } #main_menu { list-style: none; float: right; margin-right: 93px; font-size: 16px; } #main_menu li { display: inline-block; vertical-align: bottom; } #main_menu li a { display: block; padding: 10px; /* For example */ position: relative; } li a { display: inline-block; /* To enable padding */ padding: 10px; /* For example */ } li:not(:hover) .submenu { display: none; } li:hover .submenu { position: absolute; right: 0; /* If you want to stick it to the left edge, remove this line. */ white-space: nowrap; } #main_menu li:hover { background-color: #eb4b4b; } #main_menu li ul { list-style: none; background-color: #820e0e; position: absolute; width: 100%; float: right; display: none; direction: rtl; margin-right: 60px; } #main_menu li:hover ul { display: block; } #main_menu li ul li { float: left; direction: rtl; border-bottom: 1px solid #BB4545; display: block; } #main_menu li ul li a { float: none; display: block; } li { display: inline-block; position: relative; vertical-align: bottom; }

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>سایت IRI</title> <link href="~/Content/StyleSheet.css" rel="stylesheet" /> <script src="~/Scripts/bootstrap.min.js"></script> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap-rtl.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap-theme-rtl.min.css" rel="stylesheet" /> <script src="~/Scripts/jquery-3.1.0.min.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> </head> <div> <header id="iri-header"> <div id="orb-header"> <div class="iri-header-container"> <div class="logo"> <a href="#"> <img src="~/Content/img/Logo.png" /> </a> </div> <div class="loging"> <a href="/Home/Register"> <div class="loging-container"> <span id="vorod">ورود/ثبت نام</span> <img src="~/Content/img/pic1.png" /> </div> </a> </div> <div class="search"> @Html.Partial("P_Search") </div> </div> </div> </header> <div class="brand"> <div class="site-brand"> <a href="/Home/Index"> <span>اخبار ایران و جهان</span> </a> </div> <div class="menu"> <div class="menu-container"> <div class="menu-ul"> <ul id="main_menu"> <li><a href="#">1صفحه اصلی</a></li> <li><a href="#">صفحه اصلی2</a></li> <li><a href="#">3صفحه اصلی</a></li> <li><a href="#">4صفحه اصلی</a></li> <li> <a href="#">صفحه اصلی5</a> <ul class="sub-menu"> <li><a href="#">صفحه اصلی</a></li> <li><a href="#">صفحه اصلی</a></li> <li><a href="#">صفحه اصلی</a></li> <li><a href="#">صفحه اصلی</a></li> </ul> </li> <li><a href="#">صفحه اصلی6</a></li> <li><a href="#">7صفحه اصلی</a></li> <li> <a href="#">8صفحه اصلی</a> <ul class="sub-menu"> <li><a href="#">صفحه اصلی</a></li> <li><a href="#">صفحه اصلی</a></li> <li><a href="#">صفحه اصلی</a></li> <li><a href="#">صفحه اصلی</a></li> </ul> </li> <li><a href="#">صفحه اصلی9</a></li> <li><a href="#">10صفحه اصلی</a></li> <li><a href="#">صفحه اصلی11</a></li> </ul> </div> </div> </div> </div> </div>

Answer 1

You mean something like this? http://codepen.io/bra1N/pen/yJwZWo

This code is important:

#main_menu li {
    float: right;
    border-left: 1px solid #BB4545;
    position: static;
}
#main_menu li ul {
    list-style: none;
    background-color: #820e0e;
    position: absolute;
    width: 100%;
    top: 110px;
    float: left;
    display: none;
    direction: rtl;
}

Answer 2

This code should make .submenu appear only if a is hovered.

/* Reset */
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Important part */

li {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
}

li a {
    display: inline-block; /* To enable padding */
    padding: 10px; /* For example */
}

li:not(:hover) .submenu {
    display: none;
}

li:hover .submenu {
    position: absolute;
    right: 0; /* If you want to stick it to the left edge, remove this line. */
    white-space: nowrap;
}

DEMO: http://codepen.io/anon/pen/dXArNx

create Horizontal sub menu with css

Question

2 answers

solution1
0 2016-08-16 12:51:20

solution2
0 2016-08-16 13:07:53

create Horizontal sub menu with css

Question

2 answers

solution1 0 2016-08-16 12:51:20

solution2 0 2016-08-16 13:07:53

solution1
0 2016-08-16 12:51:20

solution2
0 2016-08-16 13:07:53