Can't find what is wrong with my menu. I want that when you hover a sub menu item background color would be only for submenu not for menu items. I tried everything here is menu css.
I tried #menu ul li a:hover but still affect menu items and sub items..... And I need only subitems.
#menu
{
list-style: none;
padding-right: 8%;
float: right;
padding-top: 3.5%;
clear: right;
text-indent: 10px;
}
#menu ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#menu ul a
{
display: block;
color: #FFF;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#menu ul li
{
position: relative;
float: left;
margin: 0;
padding: 0;
}
#menu ul li.current-menu-item
{
}
#menu ul li:hover
{
}
#menu ul ul
{
display: none;
position: absolute;
top: 92%;
left: -64%;
padding: 0;
background-color: #4d4d4d;
}
#menu ul ul li
{
float: none;
width: 190px;
}
#menu ul ul a
{
line-height: 120%;
padding: 10px 15px;
}
#menu ul ul ul
{
top: 0;
left: 100%;
}
#menu ul li:hover > ul
{
display: block;
}
<?php
$args = array(
'theme_location' => 'pre_primary'
);
?>
<?php wp_nav_menu( $args); ?>
Use immediate child selector!
#menu > ul > li > a:hover
To style anchors in nested list use the following css selector:
#menu li ul li a:hover
It will affect only second level items.
Related
Actual Image of the table:
Here's my "menu.php" content wherein I'm looping my Parent & Sub Categories together.
<?php
function loop_array($array = array(), $parentID = 0) {
if (!empty($array[$parentID])) {
echo '<ul>';
foreach ($array[$parentID] as $items) {
echo '<li>';
echo $items['categoryName'];
loop_array($array, $items['categoryID']);
echo '</li>';
}
echo '</ul>';
}
}
function display_menus() {
$con = mysqli_connect("localhost", "root", "", "submenu");
$query = $con->query("SELECT * FROM category");
$array = array();
if (mysqli_num_rows($query)) {
while ($rows = mysqli_fetch_array($query)) {
$array[$rows['parentID']][] = $rows;
}
loop_array($array);
}
}
And, here's my "index.php" where I'm calling the "display_menus()" function to display all the categories and sub categories from this SQL TABLE.
<?php require 'menu.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title>Sub Menu Test</title>
</head>
<body>
<?php
display_menus();
?>
</body>
</html>
After connecting these two PHP pages. I'm getting this result exact result:
Lastly, My problem is. How do I integrate this with CSS? That will look like a navigation menu with sub menus. I tried different tutorials in YouTube but I failed. Is there any CSS Menu Builder or other sources that has compatibility with this code? Thank you so much!
For integrating CSS with HTML (any element), you need to add a CSS file to your HTML file.
Need to add classes, ids selectors to your elements.
And add definitions to those classes, ids.
For example (inline stylesheet):
<style>
.left { /* Class for left aligned elements*/
float: left; /* This is attribute to be modified*/
}
#page-header { /* For element with id page-header*/
font-weight: bold; /* This is attribute to be modified*/
}
</style>
in HTML,
<div id="page-header">Welcome to StackOverflow</div>
<div class="left">Tips to ask Questions on SO</div>
<ul class="left">
<li>Search on Google for your problem</li>
<li>Don't put why this code doesn't work on Question</li>
</ul>
Also, Back to your question, for menus, we can use suprefish library.
Here's my CSS content where I'm calling it in my index.php as
<div id="cssmenu">
<?php
display_menus();
?>
and changed my menu.php function loop_aray into:
function loop_array($array = array(), $parentID = 0){
if(!empty($array[$parentID])){
echo '<ul class="cssmenu">';
foreach($array[$parentID] as $items){
echo '<li class="has-sub">';
echo $items['categoryName'];
loop_array($array, $items['categoryID']);
echo '</li>';
}
echo '</ul>';
}
}
This is what I'm GETTING and this is what I want as the OUTPUT.
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#cssmenu {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 10px;
line-height: 15px;
text-transform: uppercase;
text-align: left;
}
#cssmenu > ul {
width: auto;
list-style-type: none;
padding: 0;
margin: 0;
background: #ffffff;
border: 1px solid #ece6e8;
border-bottom: 3px solid #d9ced2;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
#cssmenu > ul li#responsive-tab {
display: none;
/* Hide for large screens */
}
#cssmenu > ul li {
display: inline-block;
*display: inline;
zoom: 1;
}
#cssmenu > ul li.right {
float: right;
}
#cssmenu > ul li.has-sub {
position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
display: block;
}
#cssmenu > ul li.has-sub ul {
display: none;
width: 250px;
position: absolute;
margin: 0;
padding: 0;
list-style-type: none;
background: #ffffff;
border: 1px solid #ece6e8;
border-bottom: 3px solid #d9ced2;
border-top: 0 none;
}
#cssmenu > ul li.has-sub ul li {
display: block;
}
#cssmenu > ul li.has-sub > a {
background-image: url('images/caret.png');
background-repeat: no-repeat;
background-position: 90% -95%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
background: #d80041 url('images/caret.png') no-repeat;
background-position: 90% 195%;
}
#cssmenu > ul li a {
display: block;
padding: 12px 24px 11px 24px;
text-decoration: none;
color: #747474;
text-shadow: 0px 1px 0px #fff;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
background: #d80041;
color: #fff;
text-shadow: 0px 1px 0px #000;
}
#media (max-width: 600px) {
#cssmenu > ul {
width: 100%;
}
#cssmenu > ul li#responsive-tab {
display: block;
}
#cssmenu > ul li#responsive-tab a {
background: url('images/menu.png') no-repeat;
background-position: 95% -35%;
}
#cssmenu > ul li#responsive-tab a:hover {
background-color: #d80041;
background-position: 95% 135%;
}
#cssmenu > ul li {
display: none;
}
#cssmenu > ul li.right {
float: none;
}
#cssmenu > ul li.has-sub {
position: relative;
}
#cssmenu > ul li.has-sub ul {
display: block;
position: static;
width: 100%;
background: #ffffff;
border: 0 none;
}
#cssmenu > ul li.has-sub ul li {
display: block !important;
}
#cssmenu > ul li.has-sub ul li a span {
display: block;
padding-left: 24px;
}
#cssmenu > ul li.has-sub > a {
background-image: none;
}
}
/* Make sure they show even if hidden in mobile view by JS */
#media (min-width: 600px) {
#cssmenu > ul > li.collapsed {
display: inline-block !important;
*display: inline;
zoom: 1;
}
#cssmenu > ul ul li.collapsed {
display: block !important;
}
}
I have a php form. Here drop down menu is created with php mysql. Menu is simple menu. I need to add right arrow for sub-child and down arrow for child menu with css. I am unable to modify the css. Plz suggest me how to make this drop down menu more attractive.
<style>
ul {list-style: none; padding: 0; margin: 0; background: #1bc2a2;}
ul li {display: block; position: relative; float: left; background: #1bc2a2;}
li ul { display: none; }
ul li a {display: block; padding: 1em; text-decoration: none; white-space: nowrap; color: #fff;}
ul li a:hover { background: #2c3e50; }
li:hover > ul {display: block; position: absolute;}
li:hover li { float: none; }
li:hover a { background: #1bc2a2; }
li:hover li a:hover { background: #2c3e50; }
.main-navigation li ul li { border-top: 0; }
ul ul ul {left: 100%; top: 0;}
ul:before, ul:after {content: " "; display: table;}
ul:after { clear: both; }
</style>
This is database table.
CREATE TABLE tbl_menu(
id INT AUTO_INCREMENT PRIMARY KEY,
label VARCHAR(20) NOT NULL,
parent INT DEFAULT NULL
);
INSERT INTO tbl_menu VALUES
(1,'ELECTRONICS',0),
(2,'TELEVISIONS',1),
(3,'COMPUTER',1),
(4,'DELL',3),
(5,'LCD',2),
(6,'PLASMA',2),
(7,'FLASH',6),
(8,'BIKE',0),
(9,'MOTORCYCLE',8),
(10,'SCOOTER',8),
(11,'BAJAJ',9),
(12,'MAHINDRA',10);
This is php query.
<?php
$con=mysqli_connect("localhost","root","","nfs");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
function get_menu_tree($parent)
{
global $con;
$menu = "";
$sqlquery = " SELECT * FROM tbl_menu where parent='" .$parent . "' ";
$res=mysqli_query($con,$sqlquery);
while($row=mysqli_fetch_array($res,MYSQLI_ASSOC))
{
$menu .="<li><a href='#'>".$row['label']."</a>";
$menu .= "<ul>".get_menu_tree($row['id'])."</ul>"; //call recursively
$menu .= "</li>";
}
return $menu;
}
?>
<ul class="main-navigation">
<?php echo get_menu_tree(0); ?>
</ul>
Try adding this::
ul li {position: relative;}
ul li::after {content: "▼"; position: absolute; top: 10px; right: 10px; font-size: 20px;}
Try This
menu > li ul a {
padding: 11px 0 11px 30px;
font-size: 13px;
}
menu a, #menu a:hover, #menu a:focus, #menu a:active {
text-decoration: none;
}
menu li, #menu a {
position: relative;
display: block;
}
menu a {
position: relative;
display: block;
}
This works:
.rightone ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.rightone ul li {
display: block;
position: relative;
float:right;
}
.rightone li ul {
display: none;
}
.rightone ul li a {
display: block;
padding: 5px 30px 5px 30px;
text-decoration: none;
white-space: nowrap;
}
.rightone ul li li {
background-color: black;
border-radius:5px;
padding: 2%;
}
.rightone ul li a:hover {
color:#0ef2c4;
}
.rightone li:active ul {
display: block;
text-align: left;
position: absolute;
}
.rightone li:hover li {
float: none;
}
.rightone li:hover a {
color:#0ef2c4;
}
.rightone li:hover li a:hover {
color:white;
}
.arrow-down {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #0ef2c4;
cursor: pointer;
}
But it work only when i hold... but i need, if i single click show that pop-up again click that arrow it will hide..
My output
I want to move that pop up left side also..
I want like this
https://jsfiddle.net/z4fej7gm/
But i dont know how apply to my project
Please anyone help me.. Thanks in advance
Css doesn't support click events
This question already has answers here:
Centering a css dropdown menu
(2 answers)
Closed 8 years ago.
How can I center the menu/navigation in header?
PHP file looks like this
<div class="menu-and-contact-wrap">
<?php
$header_phone = get_option('theme_header_phone');
if( !empty($header_phone) ){
echo '<h2 class="contact-number"><i class="fa fa-phone"></i>'.$header_phone.' <span class="outer-strip"></span></h2>';
}
?>
<!-- Start Main Menu-->
<nav class="main-menu">
<?php
wp_nav_menu( array(
'theme_location' => 'main-menu',
'menu_class' => 'clearfix'
));
?>
</nav>
<!-- End Main Menu -->
</div>
And CSS file looks like this
.menu-and-contact-wrap {
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
.main-menu {
margin-top: 42px;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
.main-menu ul {
list-style: none;
margin: 0;
}
.main-menu ul li {
float: left;
position: relative;
}
.main-menu ul li.current-menu-ancestor > a, .main-menu ul li.current-menu-parent > a, .main-menu ul li.current-menu-item > a, .main-menu ul li.current_page_item > a, .main-menu ul li:hover > a {
color: white;
background-color: #ec894d;
}
.main-menu ul li a {
font-family:"Lato", Helvetica, Arial, sans-serif;
color: #afb4b5;
font-size: 14px;
display: block;
text-decoration: none;
padding: 14px 10px;
}
.main-menu ul li ul {
display: none;
background-color: #ec894d;
width: 220px;
padding: 0;
position: absolute;
top: 48px;
left: 0;
z-index: 888;
}
.main-menu ul li ul li {
float: none;
margin: 0;
}
.main-menu ul li ul li:hover > a {
background-color: #dc7d44;
}
.main-menu ul li ul li a {
font-size: 13px;
padding: 10px 10px 12px;
color: white;
}
.main-menu ul li ul li ul {
background-color: #dc7d44;
top: 0px;
left: 220px;
}
.main-menu ul li ul li ul li:hover > a {
background-color: #d0743d;
}
.main-menu .responsive-nav {
display: none;
margin: 0px auto;
width: 100%;
padding: 5px;
}
I tried to change them as you can see above in CSS, but without any success
In default they looked like this:
Menu-and-contact-wrap looked like this
position: absolute;
bottom: 0;
right: 0;
And Main-menu looked like this before
margin-top: 42px;
float: right;
Thank you!
There are a few ways. Here are two.
Set a non-100% width on .main-menu and then add margin: 0 auto
Remove the floats from .main-menu ul li, add display: inline-block to it and add text-align: center to .main-menu
How can I resize the header area in order to insert a bigger logo. The logo height is not adjusting properly. This is a specific theme. I will include the header code and the css code.
CSS:
/* =Navigation
----------------------------------------------- */
.site-content .site-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
.site-content .nav-previous {
float: left;
width: 50%;
}
.site-content .nav-next {
float: right;
text-align: right;
width: 50%;
}
/* =top
----------------------------------------------- */
.topbar {
height:40px;
background:#302b29;
}
.top {
background:url(images/top.png) repeat-x;
height:117px;
}
.head {
background:url(images/head.png) center no-repeat;
height:117px;
}
.logo {
padding:5px 0px;
}
h1.site-title {
font-size:20px;
font-family: Arial,serif;
font-weight:bold;
color:#fff;
margin:15px 0px 5px 0px
}
h1.site-title a:link,h1.site-title a:visited {
color:#fff;
}
h2.site-description {
font-size:14px;
color: #eee;
}
/* Searchform */
#searchform {
width:260px;
float:right;
margin-top:8px;
}
#s {
width:180px;
padding:3px 5px;
background:#4C4645;
border:1px solid #5E5B5B;
color:#fff;
}
#searchsubmit {
padding:3px 10px;
background:#800404;
border:1px solid #A00C0C;
margin-left:5px;
box-shadow:none;
color:#fff;
text-shadow:1px 1px 0px #540404;
}
/* TOP-MENU */
#botmenu {
font-size: 14px;
}
#submenu {
margin: 30px 0px;
padding:0px 0px;
height:50px;
}
#submenu ul {
width: auto;
float:left;
list-style: none;
margin: 0;
padding: 0 10px;
}
#submenu li {
float: left;
list-style: none;
margin: 0;
padding: 0;
color: #222;
font-weight:400;
}
#submenu li a {
color: #fff;
display: block;
margin: 0;
padding: 16px 10px 16px 10px;
text-decoration: none;
position: relative;
}
#submenu li a:hover, #submenu li a:active, #submenu .current_page_item a {
color: #fff;
}
#submenu li a.sf-with-ul {
padding-right: 10px;
}
#submenu li ul li a, #submenu li ul li a:link, #submenu li ul li a:visited,
#submenu li ul li ul li a, #submenu li ul li ul li a:link, #submenu li ul li ul li a:visited,
#submenu li ul li ul li ul li a, #submenu li ul li ul li ul li a:link, #submenu li ul li ul li ul li a:visited {
color: #eee;
width: 148px;
margin: 0;
padding: 10px 10px;
border-top:1px solid #403837;
position: relative;
font-weight:400;
}
#submenu ul li ul li:first-child a,#submenu ul li ul li ul li:first-child a,#submenu ul li ul li ul li ul li:first-child a {
border-top:none;
}
#submenu li ul li a:hover ,#submenu li ul li ul li a:hover ,#submenu li ul li ul li ul li a:hover {
color: #fff;
}
#submenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px 0px 0px 0px;
padding: 5px 5px;
background:#302B29;
border:1px solid #302B29;
}
#submenu li ul a {
width: 150px;
}
#submenu li ul a:hover, #submenu li ul a:active {
}
#submenu li ul ul {
margin: -49px 0 0 181px;
}
#submenu li:hover ul ul, #submenu li:hover ul ul ul, #submenu li.sfHover ul ul, #submenu li.sfHover ul ul ul {
left: -999em;
}
#submenu li:hover ul, #submenu li li:hover ul, #submenu li li li:hover ul, #submenu li.sfHover ul, #submenu li li.sfHover ul, #submenu li li li.sfHover ul {
left: auto;
}
#submenu li:hover, #submenu li.sfHover {
position: static;
}
/* Layout */
#primary, #secondary{
padding:50px 0px;
}
Header Code:
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div class="topbar">
<div class="container_6">
</div>
</div>
<div class="top cf ">
<div class="container_6">
<div class="head cf">
<div class="logo grid_2">
<h1><a href="<?php bloginfo('siteurl');?>/" title="<?php bloginfo('name');?>">
<img style="float: left;" src="linktomylogo/newlogo1.png" alt="" width="148" height="90" /> </a>
</h1>
<h2 class="site-description">
<?php bloginfo( 'description' ); ?>
</h2>
</div>
<div id="botmenu" class="grid_4">
<p><?php shailan_dropdown_menu( ); ?></p>
<?php wp_nav_menu( array( 'container_id' => 'submenu', 'theme_location' => 'primary','menu_id'=>'web2feel' ,'menu_class'=>'sfmenu','fallback_cb'=> 'fallbackmenu' ) ); ?>
</div>
</div>
</div>
</div>
</header><!-- #masthead .site-header -->
<div id="main" class="site-main cf">
I have changed a few things but it messes up the site. The height of the image should be around 200 and not 90px.
Thanks
the logo is placed inside the div with the class of top, and the other with a class of head. I've modified their CSS slightly below.
.top{
background:url(images/top.png) repeat-x;
height:200px; /* Change the height here */
}
.head{
background:url(images/head.png) center no-repeat;
height:200; /* and here */
}