HTML

Drop down

<header>  
<div id="top">  
  <nav id="topmenu">  
    <ul>  
     <li><a href="">Home</a></li>  
     <li><a href="">About</a></li>  
     <li><a href="">Portfolio<span class="arrow">More Link</span></a>  
        <ul class="sublist">  
           <li><a href="#">Sub link</a></li>  
           <li><a href="#">Sub link</a></li>  
           <li><a href="#">Sub link<span class="arrow-right">More Link</span></a>  
        <ul class="subsublist">  
            <li><a href="#">Sub Sub link</a></li>  
            <li><a href="#">Sub Sub link</a></li>  
            <li><a href="#">Sub Sub link</a></li>  
       </ul>  
    </li>  
    </ul>  
    </li>
    <!-- OTHER LINKS SECTION -->  
    </ul>  
</nav>  
</div>  
</header>

dropdowns

There are 2 dropdowns
1- HTML
2- SELECT

we determine what kind of dropdown it is
 -By tagName.We inspect.If it has <select> tag, it means it is <select> dropdown. 
 -If it is HTML, we can locate and click just as any other web element.
 
 I handle Select type of dropdown by using Select class from Selenium. 
    - Methods to select from dropdown:
        - selectByVisibleText
        - selectByValue
        - selectByIndex 
        
I verify which option is selected in a dropdown?
 - If we want to get the currently selected option, 
 we use getFirstSelectedOption() method.
        -> return type: currently selected option as a web element
        
--> .getOptions();
    -> This method will return all of the options in the <select> web element.
    -> return type: List<WebElement>

dropdown

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fontenele/bootstrap-navbar-dropdowns@5.0.2/dist/css/bootstrap-navbar-dropdowns.min.css">
    <script src="https://cdn.jsdelivr.net/gh/fontenele/bootstrap-navbar-dropdowns@5.0.2/dist/js/bootstrap-navbar-dropdowns.min.js"></script>

    <script>
        $('.navbar').navbarDropdown({theme: 'bs4', trigger: 'mouseover'});
        // @TODO add options
    </script>

    

dropdown

final List<String> items = [   'Item1',   'Item2',   'Item3',   'Item4', ]; String? selectedValue;  @override Widget build(BuildContext context) {   return Scaffold(     body: Center(       child: DropdownButtonHideUnderline(         child: DropdownButton2(           hint: Text(             'Select Item',             style: TextStyle(               fontSize: 14,               color: Theme                       .of(context)                       .hintColor,             ),           ),           items: items                   .map((item) =>                   DropdownMenuItem<String>(                     value: item,                     child: Text(                       item,                       style: const TextStyle(                         fontSize: 14,                       ),                     ),                   ))                   .toList(),           value: selectedValue,           onChanged: (value) {             setState(() {               selectedValue = value as String;             });           },           buttonHeight: 40,           buttonWidth: 140,           itemHeight: 40,         ),       ),     ),   ); }